<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>个人设置</title>

    <link rel="stylesheet" href="__static__/css/tanchuang.css" />
    <link rel="stylesheet" href="__static__/css/info.css" />
    <link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script language="javascript" src="__static__/common/sign.js"></script>
    <script language="javascript"  src="__static__/common/json.js"></script>
    <script language="javascript" src="__static__/common/md5.js"></script>
    <script language="javascript" src="__static__/common/base64.js"></script>
    <script language="javascript" src="__static__/js/url.js"></script>
</head>
<body>
<!--主页面-->
<div class="lg-container">
    <h1 style="margin-left: 80px;margin-top: 100px"></h1>
    <form action="#" id="lg-form" name="lg-form" method="post">
        <div style="margin-top: -20px">
            <button type="button" name="info" id="info" onclick="infoopen()" value="" >个人中心</button>
        </div>
        <div>
            <button type="button" name="say" id="say" onclick="sayopen()" value="">留言管理</button>
        </div>

        <ul id="infof" class="infof" >
            <li><h1>个人中心</h1></li>
            <li>
                <p>
                    <font size='5'>用户账号：</font><input type="text" id="username" value="{$info.username}">
                    <br><br>
                    <font size='5'>手机号码：</font><input type="text" id="phone" value="{$info.phone}">
                    <br><br>
                    <a href="#" style="margin-left: 230px" onclick="openDialog()">
                        修改密码
                    </a><br>
                    <input type="button" style="" id="update" value="修改">
                    <input class="btn btn6" onClick="history.go(-1)" value="返回" type="button">
                </p>
            </li>
        </ul>
        <ul id="sayy" style="display: none">
            <li><h1>留言管理</h1></li>
            <li>
                <table style="margin-left: 220px;width: 600px;">
                    <thead>
                        <tr>
                            <th style="width: 5px" align="center" class="th1">
                                <input type="checkbox" id="all"/><label>&nbsp;</label></th>
                            <th style="width: 20px" align="center">标题</th>
                            <th style="width: 50px" align="center">内容</th>
                            <th style="width: 5px" align="center" class="th7">操作</th>
                        </tr>
                    </thead>

                    <thead id="tihuan">
                        {volist name='mes' id='m'}
                        <tr >
                            <th style="width: 5px" align="center" class="th1">
                                <input type="checkbox"  value="{$m.id}"/><label>&nbsp;</label></th>
                            <th style="width: 20px" align="center">
                                <input style="display: none" value="{$m.title}" >{$m.title}</th>
                            <th style="width: 50px" align="center">
                                <input style="display: none"  value="{$m.content}" >{$m.content}</th>
                            <th style="width: 5px" align="center" class="th7">
                                <input style="margin: 0px " type="button" onclick="edit_open({$m.id})" value="修改">
                                <input type="button" onclick="del({$m.id})" value="删除">
                                <!--<a href="{:url('del',array('id'=>$m.id))}" onclick="return confirm('确定删除该栏目？')">删除</a>-->
                            </th>
                        </tr>
                        {/volist}
                    </thead>
                </table>
                <div class="list-page" align="center" id="page" >
                    {for start="1" end="$pages+1" name="i" }
                    <a href="javascript:;" onclick="jump({$i})" >{$i}</a>
                    {/for}
                    {if condition="$curr neq 0"}
                    &nbsp;&nbsp;<em id="page_curr">共{$curr}/{$pages}页</em>
                    {/if}
                    {if condition="$curr eq 0"}
                    <em>您还没有发表留言哦！去<a href="#" onclick="liuyan()">发表留言</a> 吧</em>
                    {/if}
                </div>
            </li>
        </ul>
    </form>
</div>
<!--修改留言弹窗-->
<div id="lighten" class="white_content">
    <ul>
        <li>
            <label id="ids" ></label>
        </li>
        <li>
            标题：<input type="text" name="title" id="title" >
        </li>
        <li>
            内容：<textarea style="width: 54%; " name="content" id="content"></textarea>
        </li>
    </ul>
    <ul>
        <input type="button"  id="mes_edit" value="确定" >
        <input type="button" onclick = "edit_close()" value="取消" >
    </ul>
</div>
<!--修改密码弹窗-->
<div id="light" class="white_content">
    <ul>
        <li>
            旧密码：<input type="password" name="oldpwd" id="oldpwd">
        </li>
        <li>
            新密码：<input type="password" name="newpwd" id="newpwd">
        </li>
        <li>
            确认密码：<input type="password" name="nnewpwd" id="nnewpwd">
        </li>
    </ul>
    <ul>
        <input type="button"  id="edit" value="确定" >
        <input type="button" onclick = "closeDialog()" value="取消" >
    </ul>
</div>
<div id="fade" class="black_overlay"></div>
</body>

<!--修改留言-->
<script>
    $(function () {
        $('#mes_edit').click(function () {
            var id = $('#ids').val();
            var title = $('#title').val();
            var content = $('#content').val();
           if(title==''||content==''){
               alert('标题或内容不能为空');
           }else {
               //验证签名
               sign.params = {
                   id:id,
                   title:title,
                   content:content
               }
               var encode_data =sign.encode_post();
               console.log(encode_data);
               $.post(url_list.mes_edit,encode_data,function (data) {
                   //解码
                   if(typeof data == 'string'){
                       data = eval('('+data+')');
                   }
                   data = sign.decode_post(data);
                   console.log(data);
                   //返回数组
                   if(data.code==200){
                       alert(data.msg);
                       location.href = url_list.user_info;
//                    location.href = history.go(-1);
                   }else {
                       alert(data.msg);
                   }
               },'json')
           }
        })
    })
</script>
<!--删除留言-->
<script>
    function del(id) {
        var del = 0;
        //验证签名
        sign.params = {
            del:del,
            id:id
        }
        var encode_data =sign.encode_post();
        console.log(encode_data);
        $.post(url_list.mes_edit,encode_data,function (data) {
            //解码
            if(typeof data == 'string'){
                data = eval('('+data+')');
            }
            data = sign.decode_post(data);
            console.log(data);
            //返回数组
            if(data.code==200){
                alert(data.msg);
                location.href = url_list.user_info;
            }else {
                alert(data.msg);
            }
        },'json')
    }
</script>
<!--方法-->
<script type="text/javascript">
    <!--留言弹窗-->
    function edit_open(title){
        document.getElementById('ids').value=title;
//        document.getElementById('content').value=$(content).val();
        document.getElementById('lighten').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function edit_close(){
        document.getElementById('lighten').style.display='none';
        document.getElementById('fade').style.display='none'
    }
    //密码弹窗
    function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }

    <!--留言管理和个人中心隐藏切换-->
    function infoopen() {
        $("#sayy").hide();
        $("#infof").show();
    }
    function sayopen() {
        $("#infof").hide();
        $("#sayy").show();
    }
//    跳转页面
    function liuyan() {
        location.href=url_list.mes_index;
    }
    function jump(page){
        var html = '';
        var page_html = '';
        //验证签名
        sign.params = {
            curr:page
        }
        var encode_data =sign.encode_post();
        console.log(encode_data);
        $.post(url_list.mes_list_info,encode_data,function (data){
            //解码
            if(typeof data == 'string'){
                data = eval('('+data+')');
            }
            data = sign.decode_post(data);
            console.log(data['data']['list']);

            if (data['data']['list']=== undefined || data['data']['list'].length == 0){
                html ='<tr><td align="center" colspan="12">暂无相关数据</td></tr>';
                page_html ='<div class="list-page" id="page" ></div>';
                //页面数据替换
                $('#tihuan').html(html);
                $('#page').html(page_html);
            }
            else{
                list = data['data']['list'];
                curr = data['data']['curr'];
                for(var i in list){
                    list[i].title            = list[i].title?list[i].title:'';
                    list[i].content          = list[i].content?list[i].content:'';
                    list[i].id               = list[i].id?list[i].id:'';

                    html += '<tr>';
                    html += '<td style="width: 5px" align="center" class="th1">' +
                            ' <input type="checkbox"  value="' +list[i].id+
                            '"/><label>&nbsp;</label></th></td>';
                    html += '<td style="width: 20px" align="center">'+list[i].title+'</td>';
                    html += '<td style="width: 50px" align="center">'+list[i].content+'</td>';
                    html += '<td style="width: 5px" align="center" class="th7">'
                        + '<input style="margin: 0px " type="button" onclick="edit_open('+list[i].id +')" value="修改">'
                        +'<input type="button" onclick="del(' +list[i].id+ ')" value="删除">'
                        +'</td>';
                    html += '</tr>';

                    page_html ='共'+curr+'/{$pages}页';

                }
                //页面数据替换
                $('#tihuan').html(html);
                $('#page_curr').html(page_html);
            }

        },'json')
    }
</script>
<!--页面标签-->
<script>
    $(document).ready(function(){
        $("#login").click(function(){

            var action = $("#lg-form").attr('action');
            var form_data = {
                username: $("#username").val(),
                password: $("#password").val(),
                is_ajax: 1
            };

            $.ajax({
                type: "POST",
                url: action,
                data: form_data,
                success: function(response)
                {
                    if(response == "success")
                        $("#lg-form").slideUp('slow', function(){
                            $("#message").html('<p class="success">You have logged in successfully!</p><p>Redirecting....</p>');
                        });
                    else
                        $("#message").html('<p class="error">ERROR: Invalid username and/or password.</p>');
                }
            });
            return false;
        });
    });
</script>
<!--修改个人中心-->
<script>
    $(document).ready(function(){
        $(function () {
            $('#update').click(function () {
                var username = $('#username').val();
                var phone = $('#phone').val();
                //验证签名
                sign.params = {
                    username:username,
                    phone:phone
                }
                var encode_data = sign.encode_post();
                console.log(encode_data);
                $.post(url_list.update,encode_data,function (data) {
                    //解码
                    if(typeof data == 'string'){
                        data = eval('('+data+')');
                    }
                    data = sign.decode_post(data);
                    console.log(data);
                    //返回数组
                    alert(data.msg);
                },'json')
            })
        })
    })
</script>
<!--修改密码-->
<script>
    $(function () {
        $('#edit').click(function () {
            var oldpwd = $('#oldpwd').val();
            var newpwd = $('#newpwd').val();
            var nnewpwd = $('#nnewpwd').val();
            if(oldpwd=='' || newpwd=='' || nnewpwd==''){
                alert('请填写密码');
            }
            else if(newpwd != nnewpwd){
                alert('两次输入密码不一致');
            }
            else {
                //验证签名
                sign.params = {
                    oldpwd:oldpwd,
                    newpwd:newpwd
                }
                var encode_data = sign.encode_post();
                console.log(encode_data);
                $.post(url_list.update,encode_data,function (data) {
                    //解码
                    if(typeof data == 'string'){
                        data = eval('('+data+')');
                    }
                    data = sign.decode_post(data);
                    console.log(data);
                    //返回数组
                    if(data.code==200){
                        alert(data.msg);
                        document.getElementById('light').style.display='none';
                        document.getElementById('fade').style.display='none'
                    }else {
                        alert(data.msg);
                    }
                },'json')
            }
        })
    })
</script>

</html>